<?php
use_helper('I18N');
?>
<div class="breadcrumbs" id="breadcrumbs">
<script>
$(function() {
    $("#btnSubmit").click(function(){
        $("#bankForm").submit();
    });

    $("#bankForm").validate({
        messages : {
            transactionPassword: {
                remote: "Security Password is not valid."
            }
        },
        rules : {
            /*"bankName" : {
                required : true,
                minlength : 3
            },*/
            "bankBranch" : {
                required : true,
                minlength : 3
            },
            "bankState" : {
                required : true,
                minlength : 3
            },
            "bankAccNo" : {
                required : true,
                minlength : 3
            },
            "bankHolderName" : {
                required : true,
                minlength : 3
            }
        },
        submitHandler: function(form) {
            waiting();
            form.submit();
        },
        success: function(label) {
            //label.addClass("valid").text("Valid captcha!")
        }
    });
});
</script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="/member/bankAccount"><?php echo __('Bank Accounts') ?></a>
        </li>

    </ul>

    <div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input"
                       id="nav-search-input" autocomplete="off"/>
                <i class="icon-search nav-search-icon"></i>
            </span>
        </form>
    </div>
    <!-- #nav-search -->
</div>

<div class="page-content">

    <div class="row">
        <div class="col-xs-12">
            <h3 class="header smaller lighter green"><?php echo __('Bank Accounts') ?></h3>

            <!-- PAGE CONTENT BEGINS -->
            <?php include_component('component', 'alert', array('param' => $sf_user->getAttribute(Globals::SESSION_DISTID, 0))) ?>

            <form action="/member/saveBankAccount" id="bankForm" name="bankForm" method="post" class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"><?php echo __("Bank Name")?></label>

                    <div class="col-sm-9">
                        <select id="bankName" name="bankName">
                            <option value="CIMB">CIMB</option>
                            <option value="Hong Leong">Hong Leong</option>
                            <option value="Maybank">Maybank</option>
                            <option value="Public Bank">Public Bank</option>
                        </select>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"><?php echo __("Branch Name")?></label>

                    <div class="col-sm-9">
                        <input name="bankBranch" type="text" id="bankBranch" tabindexBak="5"
                                             size="30" value=""/>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"><?php echo __("Bank Address")?></label>

                    <div class="col-sm-9">
                        <input name="bankState" type="text" id="bankState" size="30"
                                                         value=""/>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"><?php echo __("Bank Account No.")?></label>

                    <div class="col-sm-9">
                        <input name="bankAccNo" type="text" id="bankAccNo" size="30"
                                                         value=""/>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right"><?php echo __("Bank Account Holder Name")?></label>

                    <div class="col-sm-9">
                        <input name="bankHolderName" type="text" id="bankHolderName" size="30"
                                                         value=""/>
                    </div>
                </div>

                <div class="space-4"></div>

                <div class="clearfix form-actions">
                    <div class="col-md-offset-3 col-md-9">
                        <button class="btn btn-info" type="button" id="btnSubmit">
                            <i class="icon-ok bigger-110"></i>
                            Submit
                        </button>
                    </div>
                </div>
            </form>

            <script type="text/javascript" language="javascript">
                var datagrid = null;
                $(function() {
                    datagrid = $("#datagrid").r9jasonDataTable({
                        // online1DataTable extra params
                        "idTr" : true, // assign <tr id='xxx'> from 1st columns array(aoColumns);
                        "extraParam" : function(aoData) { // pass extra params to server
                        },
                        "reassignEvent" : function() { // extra function for reassignEvent when JSON is back from server
                            reassignDatagridEventAttr();
                        },

                        // datatables params
                        "bLengthChange": true,
                        "bFilter": false,
                        "bProcessing": true,
                        "bServerSide": true,
                        "bAutoWidth": false,
                        "sAjaxSource": "/finance/bankAccountList",
                        "sPaginationType": "full_numbers",
                        "aaSorting": [
                            [1,'desc']
                        ],
                        "aoColumns": [
                            { "sName" : "bank_id", "bVisible" : false,  "bSortable": true},
                            { "sName" : "bank_name",  "bSortable": true},
                            { "sName" : "bank_branch",  "bSortable": true},
                            { "sName" : "bank_state",  "bSortable": true},
                            { "sName" : "bank_acc_no",  "bSortable": true},
                            { "sName" : "bank_holder_name",  "bSortable": true}
                        ]
                    });
                }); // end function

                function reassignDatagridEventAttr() {
                }
            </script>
            <div class="table-header">
                <?php echo __('Bank Details') ?>
            </div>
            <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover" id="datagrid" border="0" width="100%">
                <thead>
                <tr>
                    <th></th>
                    <th><?php echo __('Bank Name') ?></th>
                    <th><?php echo __('Bank Branch') ?></th>
                    <th><?php echo __('Bank Address') ?></th>
                    <th><?php echo __('Bank Account No.') ?></th>
                    <th><?php echo __('Bank Account Holder Name') ?></th>
                </tr>
                </thead>
            </table>
            <!-- PAGE CONTENT ENDS -->
        </div>
        <!-- /.col -->
    </div>
</div>